<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="outOrderTableData"
      :pagination="false"
      :scroll="{ x: 1500 }"
    >
      <!-- 接收时间-->
      <span slot="createTime" slot-scope="text, record">
        {{
          record.createTime === null || record.createTime === ""
            ? "暂无"
            : record.createTime.replace("T", " ")
        }}
      </span>
      <!-- 状态-->
      <span slot="state" slot-scope="text, record">
        <span style="color: #3eae7c">
          {{ record.state }}
        </span>
      </span>
      <!-- 创建时间-->
      <span slot="updateTime" slot-scope="text, record">
        {{
          record.updateTime === null || record.updateTime === ""
            ? "暂无"
            : record.updateTime.replace("T", " ")
        }}
      </span>
      <span slot="cost" slot-scope="text, record">
        {{
          record.cost || '暂无'
        }}
      </span>
      <span slot="currency" slot-scope="text, record">
        {{
          record.currency || '暂无'
        }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a
          href="javascript:;"
          style="text-decoration: underline; color: rgb(41, 41, 224)"
          @click="costServiceInfo(record)"
          >账单详情
        </a>
      </span>
    </a-table>
    <!-- 服务项信息查看 -->
    <ServiceModalReap />
  </div>
</template>

<script>
import ServiceModalReap from "@/components/serviceModal/ServiceModalReap.vue";
export default {
  components: {
    ServiceModalReap,
  },

  props: ["outOrderTableData"],
  data() {
    return {
      loading: false,
      visible: false,
    };
  },
  methods: {
    //费用服务项信息查看
    costServiceInfo(record) {
      setTimeout(() => {
        this.$bus.$emit(
          "reappearance",
          record,
          3,
          record.key,
          false,
        );
      }, 50);
    },
  },
  computed: {
    columns() {
      return [
        {
          title: "入库仓库",
          dataIndex: "warehouseName",
          align: "center",
          scopedSlots: { customRender: "warehouseName" },
          width: "10%",

          //  fixed: "left",
        },
        {
          title: "订单编号",
          dataIndex: "orderNumber",
          align: "center",
          scopedSlots: { customRender: "orderNumber" },
          width: "9%",
        },
        {
          title: "客户编号",
          dataIndex: "tenantId",
          align: "center",
          width: "9%",
        },
        // {
        //   title: "SKU总数量（个）",
        //   dataIndex: "title",
        //   // ellipsis: true,
        //   scopedSlots: { customRender: "title" },
        //   align: "center",
        //   width: "9%",
        // },
        // {
        //   title: "SKU总重量（g）",
        //   dataIndex: "typeName",
        //   scopedSlots: { customRender: "typeName" },
        //   align: "center",
        //   width: "10%",
        //   // ellipsis: true,
        // },
        {
          title: "币种",
          dataIndex: "currency",
          scopedSlots: { customRender: "currency" },
          align: "center",
          width: "8%",
          // ellipsis: true,
        },
        {
          title: "费用",
          dataIndex: "cost",
          scopedSlots: { customRender: "cost" },
          align: "center",
          width: "9%",
        },
        {
          title: "状态",
          dataIndex: "state",
          scopedSlots: { customRender: "state" },
          align: "center",
          width: "9%",
        },

        {
          title: "接收时间",
          dataIndex: "updateTime",
          scopedSlots: { customRender: "updateTime" },
          align: "center",
          width: "9%",
        },
        {
          title: "结算时间 ",
          dataIndex: "a",
          align: "center",
          width: "9%",
          scopedSlots: { customRender: "a" },
          // ellipsis: true,
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: "12%",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
</style>